<script setup lang="ts">
//左侧菜单需要用到的图标
import {
  Document,
  Calendar,
  Search,
  InfoFilled,
  Setting,
  HomeFilled
} from "@element-plus/icons-vue";
</script>
<template>
  <div class="hospital">
    <!--左侧导航区-->
    <div class="menu">
        <div class="top">
            <el-icon><HomeFilled /></el-icon>
            <span> / 医院详情</span>
        </div>
      <el-menu default-active="1" class="el-menu-vertical-demo">

        <el-menu-item index="1">
          <el-icon><Calendar /></el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><document /></el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><setting /></el-icon>
          <span>预约通知</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><InfoFilled /></el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon><Search /></el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content">456</div>
    <!--右侧呢溶液-->
  </div>
</template>
<style scoped lang="scss">
.hospital {
  display: flex;
  .menu {
    .top{
        color: #7f7f7f;
    }
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .content {
    flex: 8;
  }
}
</style>
